<template>
  <div>
    <div class="">
      <van-form @submit="onSubmit">
        <van-field label="用户" v-model="regForm.name" type="text" placeholder="请输入用户"
          :rules="[{ pattern:regNamePwd,required: true, message: '用户名错误'}]" />
        <van-field label="密码" v-model="regForm.password" type="password" placeholder="请输入密码"
          :rules="[{ pattern:regNamePwd,required: true, message: '密码错误' }]" />
        <van-field label="确认" v-model="regForm.password2" type="password" placeholder="请确认密码"
          :rules="[{ pattern:regNamePwd,required: true, message: '密码错误' }]" />
        <van-field label="电话" v-model="regForm.phone" type="tel" placeholder="请输入电话"
          :rules="[{ pattern:regPhone, message: '无效手机号码' }]" />
        <van-field name="radio" label="性别">
          <template #input>
            <van-radio-group v-model="regForm.gender" direction="horizontal">
              <van-radio :name="1" checked-color="#06cb62">男</van-radio>
              <van-radio :name="0" checked-color="#06cb62">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>        
        <van-field name="uploader" label="头像">
          <template #input>
            <van-uploader name="avatar" v-model="avatarList" :max-count="1" :after-read="afterRead" />
          </template>
        </van-field>
        <div style="margin: 16px;">
          <van-button round block style="background-color: #06cb62; color: #FFFFFF" native-type="submit">提交</van-button>
        </div>
      </van-form>
      
    </div>
  </div>
</template>

<script>
  import {
    registerAPI,
    uploadAvatarAPI
  } from "@/api/user.js";
import {setUserLocal} from '@/utils/auth'
  export default {
    data() {
      return {
        regForm: { //表单中的字段名与数据库中用户表的字段名要求一致
          name: "",
          password: "",
          password2: "",
          phone: "",
          gender: 1,
          avatar: "",
        },
        avatarList: [],
        //规则:字母数字‘6~12        
        regNamePwd: /^[a-z0-9]{3,12}$/i,
        regPhone: /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/,
      };
    },
    methods: {
      //手动处理文件上传
      afterRead(file, detail) {
        file.status = 'uploading';
        file.message = '上传中...';
        uploadAvatarAPI(file, detail).then(result => {
          file.status = '';
          file.message = '';
          //重新生成显示的图片url
          this.avatarList = [];
          this.avatarList.push({
            url: this.APIDomainName + result.url
          })
          //设置用户表中的字段值
          this.regForm.avatar = result.url;
        });
      },
      //处理提交保存
      onSubmit() {
        if (this.regForm.password != this.regForm.password2) {
          this.$toast("密码两次输入不一致");
          return;      
        }
        //注意传递过去的参数user的属性名
        let user = this.regForm;
        delete user.password2; //删除该临时的字段
        registerAPI(user).then(result => {
          setUserLocal(result.data.user);
          this.$router.push({
            name: "login"
          });
        });
      },
    },
  };
</script>

<style lang="less" scoped>
 
</style>